<template>
	<div class="not-found">
		<el-result icon="warning" title="404" sub-title="Sorry, the page you visited does not exist.">
			<template #extra>
				<el-button type="primary" @click="goHome">Back to Home</el-button>
			</template>
		</el-result>
	</div>
</template>

<script setup lang="ts">
	import { useRouter } from 'vue-router';
	import { ElMessage } from 'element-plus';

	const router = useRouter();

	const goHome = () => {
		ElMessage.info('Redirecting to home...');
		console.log(router);
		router.push('/');
	};
	
</script>

<style scoped>
	.not-found {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f0f2f5;
	}
</style>